<div class="task-lists">
  <app-task-list
    class="list-container"

    appDroppable
    [dragEnterClass]="'drag-enter'"
    [dropTags]="['task-item', 'task-list']"

    appDraggable="true"
    [draggedClass]="'drag-start'"
    [dragTag]="'task-list'"
    [dragData]="list"
    (dropped)="handleMove($event, list)"

    [ngStyle]="{order: list.order}"
    *ngFor="let list of lists">
    <app-task-header
      [header]="list.name"
      (newTask)="launchNewTaskDialog()"
      (moveAll)="launchCopyTaskDialog()"
      (delList)="launchConfirmDialog()"
      (changeListName)="launchEditListDialog()"></app-task-header>

      <app-quick-task (quickTask)="handleQuickTask($event)"></app-quick-task>

    <app-task-item
      *ngFor="let task of list.tasks"
      [item]="task"
      (taskClick)="launchDataTaskDialog(task)"
    ></app-task-item>
  </app-task-list>
</div>

<button mat-fab type="button" class="fab-button" (click)="launchNewListDialog()">
  <mat-icon>add</mat-icon>
</button>
